<template>
  <div class="_wz_cent_main _wz_beidouManagement">
    <Card dis-hover :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <div slot="extra">
        <Button type="info" size="small" v-if="!searchType" @click="searchType = true" icon="ios-arrow-down">更多</Button>
        <Button type="info" size="small" v-else @click="searchType = false" icon="ios-arrow-up">收起</Button>
      </div>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="车牌号" v-if="!vehicleData">
          <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请填写车牌号" clearable />
        </FormItem>
        <FormItem label="车主业户">
          <i-input v-model="formDataSearch.ownerName" placeholder="请填写车主业户" clearable />
        </FormItem>
        <FormItem label="登记人" v-if="searchType">
          <i-input v-model="formDataSearch.registrantName" placeholder="请填写登记人" clearable />
        </FormItem>
        <FormItem label="到期日期" v-if="searchType">
          <DatePicker type="daterange" v-model="dateRange" placeholder="请选择到期日期" style="width:96%"></DatePicker>
        </FormItem>
        <FormItem label="到期状态" v-if="searchType">
          <i-select v-model="formDataSearch.expireState" filterable placeholder="请选择到期状态" clearable>
            <Option value="1">未到期</Option>
            <Option value="0">已到期</Option>
            <Option value="2">即将到期</Option>
          </i-select>
        </FormItem>
        <FormItem label="提醒状态" v-if="searchType">
          <i-select v-model="formDataSearch.whetherRemind" filterable placeholder="请选择提醒状态" clearable>
            <Option value="1">开启</Option>
            <Option value="0">关闭</Option>
          </i-select>
        </FormItem>
        <FormItem label="运输企业" v-if="searchType && !vehicleData">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData" v-if="!vehicleData">添加</Button>
        <Button type="success" @click="expireDerive">导出</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer :title="formTitle" v-model="formOperation" width="1000" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">车辆选择</p>
          <Row>
            <i-col span="8">
              <FormItem label="北斗车辆" prop="refVehicleUuid">
                <i-select v-model="formData.refVehicleUuid" filterable placeholder="请选择北斗车辆" clearable @on-change="refVehicleUuidFun" :label-in-value="true" :disabled="!!formData.id">
                  <Option v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.carPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <vehicleBriefly :vehicleBrieflyData="vehicleBrieflyData"></vehicleBriefly>

        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">北斗信息</p>
          <Row>
            <i-col span="24">
              <i-col span="8">
                <FormItem label="车主业户" prop="terminalVehicleOwnerName">
                  <i-input v-model="formData.terminalVehicleOwnerName" placeholder="请填写车主业户" clearable />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="联系电话" prop="terminalVehicleOwnerPhone">
                  <i-input v-model="formData.terminalVehicleOwnerPhone" placeholder="请填写联系电话" clearable />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="登记人" prop="terminalRegistrantName">
                  <i-input v-model="formData.terminalRegistrantName" placeholder="请填写登记人" clearable />
                </FormItem>
              </i-col>
            </i-col>
            <i-col span="8">
              <FormItem label="入网公司" prop="terminalCompanyValue">
                <i-input v-model="formData.terminalCompanyValue" placeholder="请填写入网公司" clearable />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="办理日期" prop="wzTerminalDate">
                <DatePicker type="date" v-model="formData.wzTerminalDate" :options="terminalDate" clearable @on-change="terminalDateFun" placeholder="请选择办理日期"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="到期日期" prop="wzTerminalExpireDate">
                <DatePicker type="date" v-model="formData.wzTerminalExpireDate" :options="terminalExpireDate" @on-change="terminalExpireDateFun" placeholder="请选择到期日期"></DatePicker>
              </FormItem>
            </i-col>



            <i-col span="8">
              <FormItem label="北斗净费" prop="terminalNetFee">
                <i-input v-model="formData.terminalNetFee" placeholder="请填写北斗净费" clearable />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="北斗全费" prop="terminalFullFee">
                <i-input v-model="formData.terminalFullFee" placeholder="请填写北斗全费" clearable />
              </FormItem>
            </i-col>
            <i-col span="24">
              <i-col span="8">
                <FormItem label="提醒天数" prop="terminalRemindDay">
                  <i-input v-model.number="formData.terminalRemindDay" placeholder="请填写提醒天数" clearable @on-change="wzTerminalRemindDateFun"/>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="提醒日期" prop="wzTerminalRemindDate">
                  <DatePicker type="date" v-model="formData.wzTerminalRemindDate" placeholder="请选择提醒日期" clearable ></DatePicker>
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="提醒状态" prop="terminalWhetherRemind">
                  <i-switch v-model.number="formData.terminalWhetherRemind" :false-value="0" :true-value="1">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
              </i-col>
            </i-col>
            <i-col span="24">
              <FormItem label="北斗资料">
                <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="handleBeforeUpload" multiple>
                  <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                </Upload>
                <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in imgEntityList">
                    <div class="_wz_insertimage">
                      <img :src="!!item.terminalImgUrl?apiUrl.imgUrl+item.terminalImgUrl:''" @error="public.imgDispose" />
                      <div class="_wz_insertimage-cover" v-if="!!item.terminalImgUrl">
                        <Icon type="ios-eye-outline" @click.native="handleView(apiUrl.imgUrl+item.terminalImgUrl)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="imgEntityListRemove(item,index)"></Icon>
                      </div>
                    </div>
                    <i-input v-model="item.terminalImgDescribe" placeholder="填写图片名称" @on-change="alterImgName(item)" clearable />
                  </div>

                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in defaultList">
                    <div class="_wz_insertimage">
                      <img :src="item" @error="public.imgDispose">
                      <div class="_wz_insertimage-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
                      </div>
                    </div>
                    <i-input v-model="nameList[index]" placeholder="填写图片名称" clearable />
                  </div>
                </div>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="备注" prop="terminalRemark">
                <i-input v-model="formData.terminalRemark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
        </div>
      </Form>
    </Drawer>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

    <Drawer title="详情" v-model="formDetails" width="1000" :draggable="true" :mask-closable="false" :styles="{'padding':'10px 10px 10px 10px'}">
      <beidouManagementSee v-if="formDetails" :selectData="formDetailsData"></beidouManagementSee>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

import beidouManagementSee from './beidouManagementSee.vue'
import vehicleBriefly from '../expire/vehicleBriefly.vue'
import wzTbale from "../../../components/table/table";
import Viewer from "v-viewer";

export default {
  props: ['vehicleData'],//接收来自父组件的数据
  components: {
    beidouManagementSee,//北斗详情
    vehicleBriefly,//车辆简述
    wzTbale,//列表
  },
  data() {
    return {
      spinShow:false,//本页加载
      searchType:false,//搜索条件
      uploadProgress: 0,//文件上传进度
      subDeptList: [],//运输企业
      dateRange: [],
      terminalDate: {},//办理日期限制
      terminalExpireDate: {},//到期日期
      vehicleBrieflyData: null,//车辆简述

      formDetailsData: {},//北斗详情数据
      formDetails: false,//北斗详情

      carList: [],//车和挂车List

      //缩略图
      visible: false,
      imgSrc: "",

      formDataSearch: {},//搜索表单数据
      formData: {
        terminalVehicleOwnerName: '',//车主业户
        terminalVehicleOwnerPhone: ''//联系电话
      },//新增修改表单数据
      formOperation: false,//表单左侧移出
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      tableData: {
        url: this.apiUrl.webApi + "/management/terminal/terminalPageList",//请求地址
        method: 'post',//请求方式
        where: {vehiclePlateNo:!!this.vehicleData ? this.vehicleData.carPlateNo:''},//搜索条件
        height: 'auto',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '档案号', minWidth: 160, key: 'terminalNumber'},
          {title: '车牌号', minWidth: 100, key: 'terminalVehiclePlateNo'},
          {title: '车主业户', minWidth: 120, key: 'terminalVehicleOwnerName'},
          {title: '联系电话', minWidth: 120, key: 'terminalVehicleOwnerPhone'},
          {title: '入网公司', minWidth: 120, key: 'terminalCompanyValue'},
          {title: '办理日期', minWidth: 110, key: 'terminalDate'},
          {title: '到期日期', minWidth: 110, key: 'terminalExpireDate'},
          {title: '登记人', minWidth: 100, key: 'terminalRegistrantName'},
          {title: '运输企业', minWidth: 260, key: 'deptName'},
          {
            title: '提醒状态', fixed: 'right', minWidth: 120, render: (h, params) => {
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: (params.row.terminalWhetherRemind == 0) ? "error" : "primary"
                }
              }, (params.row.terminalWhetherRemind == 0) ? "关闭" :  "开启");
            }
          },
          {
            title: '到期状态', fixed: 'right', minWidth: 140, render: (h, params) => {
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: (params.row.terminalExpireState == 0) ? "error" : (params.row.terminalExpireState == 1) ? "success" : "warning"
                }
              }, (params.row.terminalExpireState == 0) ? "已到期" : (params.row.terminalExpireState == 1) ? "未到期" : "即将到期");
            }
          },
          {
            title: '档案状态', fixed: 'right', minWidth: 120, render: (h, params) => {
              if(params.row.terminalState == 1){
                return h('Tag', {props: {type: 'dot',color: "success"}},"正常");
              }else if(params.row.terminalState == 2){
                return h('Tag', {props: {type: 'dot',color: "warning"}},"过户");
              }else if(params.row.terminalState == 3){
                return h('Tag', {props: {type: 'dot',color: "error"}},"报废");
              }else{
                return h('Tag', {props: {type: 'dot',color: "default"}},"未知");
              }
            }
          },
          {
            title: '操作', width: 120, fixed: 'right',
            render: (h, params) => {

              let operationButtons = [];
              operationButtons.push(h('span', {
                style: {"color": "#2d8cf0", "cursor": "pointer"},
                on: {
                  click: () => {
                    this.formDetailsData = params.row;
                    this.formDetails = true;
                  }
                }
              }, '查看'))


              var buttonList = [];


              if(params.row.terminalWhetherRemind == 1){//关闭
                buttonList.push(h('DropdownItem', {
                  nativeOn: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '关闭到期提醒',
                        content: '确定要关闭选中的到期提醒？',
                        onOk: () => {
                          this.remindState(params.row,0)
                        },
                        onCancel: () => {
                          //点击取消
                        }
                      });
                    }
                  }
                }, '关闭'))
              }else if(params.row.terminalWhetherRemind == 0){//打开
                buttonList.push(h('DropdownItem', {
                  nativeOn: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '打开到期提醒',
                        content: '确定要打开选中的到期提醒？',
                        onOk: () => {
                          this.remindState(params.row,1)
                        },
                        onCancel: () => {
                          //点击取消
                        }
                      });
                    }
                  }
                }, '打开'))
              }


              //修改
              if(params.row.terminalState == 1){
                buttonList.push(h('DropdownItem', {
                  nativeOn: {
                    click: () => {
                      this.modifyTableData(params.row)
                    }
                  }
                }, '修改'))
              }

              //删除
              buttonList.push(h('DropdownItem', {
                nativeOn: {
                  click: () => {
                    this.removeTableFun(params.row)
                  }
                }
              }, '删除'))

              if (buttonList.length > 0 && !this.vehicleData) {
                operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
                operationButtons.push(h('Dropdown', {props: {trigger: "hover", transfer: true}},
                  [
                    h('span', {style: {"color": "#2d8cf0", "cursor": "pointer"}}, '更多▼'),
                    h('DropdownMenu', {slot: "list"}, buttonList)
                  ])
                )
              }
              return operationButtons;
            }
          },
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },
      //验证
      ruleValidate: {
        terminalRemindDay:[
          {type: 'number', required: true, message: '请填写提醒天数', trigger: 'blur'}
        ],
        wzTerminalRemindDate: [
          {type: "date", required: true, message: "请选择提醒日期", trigger: "blur"}
        ],
        refVehicleUuid: [
          {required: true, message: '请选择北斗车辆', trigger: 'blur'},
        ],
        wzTerminalDate: [
          {type: "date", required: true, message: "请选择办理日期", trigger: "blur"}
        ],
        wzTerminalExpireDate: [
          {type: "date", required: true, message: "请选择到期日期", trigger: "blur"}
        ],
        terminalRegistrantName: [
          {required: true, message: '请填写登记人', trigger: 'blur'},
        ],
        terminalVehicleOwnerName: [
          {required: true, message: '请填写车主业户', trigger: 'blur'},
        ],
        terminalVehicleOwnerPhone: [
          {required: true, message: '请填写联系电话', trigger: 'blur'},
          {
            validator: (rule, value, callBack) => {
              if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
                callBack()
              } else {
                callBack('请输入手机号 或者 区号-座机号')
              }
            }, trigger: 'blur'
          }
        ],
      },
      formTitle: "",//表单名称
      defaultList: [],//图片展示数据
      defaultListData: [],//图片表单数据

      nameList: [],//图片名称
      imgEntityList: [],//多图回显数据
    }
  },
  computed: {//计算属性
    vehicle: function () {
      // 通过vuex的getters方法来获取state里面的数据
      return this.$store.getters.getVehicle;
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

    var that = this;

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })


    //北斗车List
    that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehicleList", {}).then(res => {
      that.tableLoading = false;
      if (!!res) {
        that.carList = res.data.data;
      }
    }).catch(err => {
      console.log('失败', err);
    })

  },
  methods: {//执行的方法
    //关闭 打开 提醒  whetherRemind   提醒状态（0：不提醒，1：数据提醒）
    remindState(data,type){
      var that = this;
      that.tableLoading = true;
      that.axios.post(that.apiUrl.webApi + "/management/terminal/terminalCloseRemind",{uuid: data.uuid,whetherRemind:type}).then(res => {
        if (!!res) {
          that.$Message.info('操作成功');
          that.$refs.wzTbale.tableLoadData();
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    addTableData() {//table添加
      let that = this;
      that.$store.dispatch("setVehicle", {});
      that.formTitle = "添加";
      that.defaultList = [];
      that.defaultListData = [];
      that.nameList = [];
      that.imgEntityList = [];//多图回显
      that.formData = {
        terminalRemindDay:90,
        terminalVehicleOwnerName: '',//车主业户
        terminalVehicleOwnerPhone: '',//联系电话
        wzTerminalExpireDate: "",
        terminalWhetherRemind:1,
        terminalRegistrantName:JSON.parse(sessionStorage.getItem('loginData')).user.name,
        wzTerminalDate: new Date(),
        wzTerminalRemindDate:'',
      };

      that.naturalMonthAdded()
      that.vehicleBrieflyData = null;//车辆简述

      that.wzTerminalRemindDateFun();

      that.formOperation = true;
    },
    modifyTableData(data) {//修改
      let that = this;
      that.formTitle = "修改";
      // that.formData = {};

      that.defaultList = [];
      that.defaultListData = [];
      that.nameList = [];

      var formData = JSON.parse(JSON.stringify(data));
      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/management/terminal/terminalInfo", {uuid: formData.uuid}).then(res => {
        that.spinShow = false;
        if (!!res) {
          //车辆数据赋值
          formData = res.data.data;

          let imgList = [];
          res.data.data.imgEntityList.forEach((k, i) => {
            k.imgUrl = that.apiUrl.imgUrl + k.terminalImgUrl
            imgList.push(k);
          })

          that.imgEntityList = imgList;//res.data.data.imgEntityList;//多图回显
          formData.imgUpdateListStr = [];
          formData.imgDeleteIdListStr = [];

          //修改  办理日期
          formData.wzTerminalDate = new Date(formData.terminalDate);
          formData.wzTerminalExpireDate = new Date(formData.terminalExpireDate);
          formData.wzTerminalRemindDate = !!new Date(formData.terminalRemindDate)?new Date(formData.terminalRemindDate):'';

          //车辆简述
          that.vehicleBrieflyData = {
            modelType: 1,
            value: formData.refVehicleUuid
          };
          that.formData = formData;
          that.formOperation = true;
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    removeTableFun(data) {//删除
      let that = this;
      that.$Modal.confirm({
        title: '删除提醒',
        content: '确定要删除选中的记录？',
        onOk: () => {
          that.spinShow = true;
          that.axios.post(that.apiUrl.webApi + "/management/terminal/terminalDelete", {uuid: data.uuid}).then(res => {
            that.spinShow = false;
            if (!!res) {
              that.$Message.success('删除成功');
              that.$refs.wzTbale.tableLoadData();
            }
          }).catch(err => {
            console.log("失败", err)
          })
        },
        onCancel: () => {
          //点击取消
        }
      });
    },
    searchSubmit() {//搜索
      this.formDataSearch.expireStartDate = !!this.dateRange[0] ? this.public.timeFormatting(this.dateRange[0], "yyyy-MM-dd") : '';
      this.formDataSearch.expireEndDate = !!this.dateRange[1] ? this.public.timeFormatting(this.dateRange[1], "yyyy-MM-dd") : '';
      this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
      this.$refs.wzTbale.tableLoadData(true);
    },
    addSubmit(name) {//新增修改提交
      let that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用
          let data = that.formData;
          //办理日期
          data.terminalDate = that.public.timeFormatting(data.wzTerminalDate, "yyyy-MM-dd");
          data.terminalExpireDate = that.public.timeFormatting(data.wzTerminalExpireDate, "yyyy-MM-dd");
          data.terminalRemindDate = that.public.timeFormatting(data.wzTerminalRemindDate, "yyyy-MM-dd");


          let formData = new FormData();

          //北斗资料
          that.defaultListData.forEach(function (k, i) {
            let type = k.name.substr((k.name.lastIndexOf(".") + 1));
            formData.append('imgList', k, (that.nameList[i].length > 0 ? that.nameList[i] : '图片描述') + '.' + type);
          })

          if (!!data.imgUpdateListStr) {
            if (data.imgUpdateListStr instanceof Object) {
              data.imgUpdateListStr = JSON.stringify(data.imgUpdateListStr);
            }
          }

          //修改提交删除字段
          delete data.imgEntityList;

          for (let key in data) {
            //if (!!data[key]) {
            formData.append(key, data[key]);
            //}
          }

          that.axios.post(that.apiUrl.webApi + "/management/terminal/terminalSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.formOperation = false;
              that.$refs.wzTbale.tableLoadData();
            }
          }).catch(err => {
            console.log("失败", err)
          })

        } else {
          this.$Message.error('请正确填写表单');
        }
      })
    },
    //缩略图查看
    handleView(src) {
      // const viewer = this.$el.querySelector('._wz_insertimage').Viewer
      // viewer.show()
      this.imgSrc = src;
      this.visible = true;
    },
    //北斗资料
    handleBeforeUpload(file) {//新增的时候 处理图片数据
      //如果是文件  就展示文件名
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        this.defaultList.push(window.URL.createObjectURL(file));
        this.defaultListData.push(file);
        this.nameList.push("图片描述");
      } else {
        this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //北斗资料删除
    handleRemove(file, index) {//新添加的图片删除
      this.defaultList.splice(index, 1);
      this.defaultListData.splice(index, 1);
      this.nameList.splice(index, 1);
    },
    //多图回显删除
    imgEntityListRemove(data, index) {
      this.formData.imgDeleteIdListStr.push(data.uuid);
      this.imgEntityList.splice(index, 1);
    },
    //回显图片备注被修改的时候
    alterImgName(data) {
      let that = this;
      let type = true;
      that.formData.imgUpdateListStr.forEach((k, i) => {
        if (k.uuid == data.uuid) {//存在相同数据
          k.terminalImgDescribe = (data.terminalImgDescribe.length > 0 ? data.terminalImgDescribe : "图片描述");
          type = false;
          return false;
        }
      })
      if (type) {
        that.formData.imgUpdateListStr.push({
          'uuid': data.uuid,
          terminalImgDescribe: (data.terminalImgDescribe.length > 0 ? data.terminalImgDescribe : "图片描述")
        });
      }
    },
    //车 挂车 详情
    refVehicleUuidFun(data) {
      data = !!data ? data : {};
      data.modelType = 1;
      this.vehicleBrieflyData = data;
    },
    //计算到期日期
    terminalDateFun(data) {
      let that = this;
      that.wzTerminalRemindDateFun();
      that.terminalExpireDate = {
        disabledDate(endTime) {
          return endTime < new Date(data) //|| endTime > Date.now()
        }
      }
      //确定 是数字 进行计算
      if (!!that.formData.wzTerminalDate) {
        that.naturalMonthAdded();
      }
    },
    //到期时间
    terminalExpireDateFun(data) {
      let that = this;
      that.wzTerminalRemindDateFun();
      that.terminalDate = {
        disabledDate(startTime) {
          return startTime > new Date(data) //|| startTime > Date.now()
        }
      }
    },
    //提醒时间
    wzTerminalRemindDateFun(){
      var that = this;
      if (/^-?[1-9]\d*$/.test(that.formData.terminalRemindDay) && !!that.formData.wzTerminalExpireDate) {
        //确定 是数字 进行计算
        that.$nextTick(function () {
          that.formData.wzTerminalRemindDate = new Date(new Date(that.formData.wzTerminalExpireDate).getTime() - parseInt(that.formData.terminalRemindDay) * 24 * 60 * 60 * 1000);
        })
      }else{
        that.formData.wzTerminalRemindDate = '';
      }
    },
    //自然月添加
    naturalMonthAdded() {
      let that = this;
      if (!!!that.formData.wzTerminalDate) {//办理时间
        return false;
      }
      let data = that.formData.wzTerminalDate;

      let date = new Date(data);
      date.setMonth(date.getMonth() + 12, new Date(data).getDate());

      //读取日期自动会减一，所以要加一
      /*
      * 1.获得一开始的天数
      * 2.获得追加完的天数
      * 3.如果不相等  在原日期上 - 1天
      * 4.获得现日期的 月份 如果是3  判断日期是否一样 如果一样 不变 如果不一样 按找2月份最大日期算
      * */
      let mo = date.getMonth() + 1;
      let old = new Date(data).getDate();
      let news = new Date(date).getDate();
      let newsDate = date;

      if (mo == 3) {
        if (old != news) {
          newsDate = new Date(new Date(date).getFullYear() + '-03-01').getTime() - 1 * 24 * 60 * 60 * 1000;
        }
      } else {
        if (old != news) {
          newsDate = new Date(date).getTime() - 1 * 24 * 60 * 60 * 1000
        }
      }
      that.formData.wzTerminalExpireDate = newsDate;
    },
    //导出
    expireDerive() {
      let that = this;
      let formDataSearch = JSON.parse(JSON.stringify(this.formDataSearch));
      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "//management/terminal/terminalExport", formDataSearch).then(res => {
        that.spinShow = false;
        if (!!res) {
          window.open(that.apiUrl.imgUrl + res.data.data)
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
  },
  watch: {//监听
    vehicle(news, old) {
      if (!this.formData.id) {
        this.formData.terminalVehicleOwnerName = news.wzVehicleOwnerName;
        this.formData.terminalVehicleOwnerPhone = news.wzVehicleOwnerPhone;
      }
    }
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_beidouManagement {
  display: flex;
  flex-direction: column;
}

</style>
